<template>
  <div>
    <!-- 面包屑导航 --- 面包屑组件 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index/home' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item
        ><a href="#/index/articleList">文章管理</a></el-breadcrumb-item
      >
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 大容器---- 带阴影效果 -- 卡片组件 -->
    <el-card class="box-card">
      <!-- 表格 --- 表格组件 -->
      <!-- 
          data：表示绑定需要渲染的表格数据
          border：边框

          calc() 函数用于动态计算长度值。
            需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
            任何长度值都可以使用calc()函数进行计算；
            calc()函数支持 "+", "-", "*", "/" 运算；
            calc()函数使用标准的数学运算优先级规则；
       -->
      <el-table :data="tableData" border height="calc( 100vh - 210px )" style="width: 100%">
          <!-- 
              label: 表示表头的列标题
              prop：列对应显示的内容的字段名(属性名)
           -->
        <el-table-column type="index" width="80">
        </el-table-column>
        <el-table-column prop="title" label="标题" >
        </el-table-column>
        <el-table-column prop="type" label="类型">
          <!--  作用域插槽
            封装组件：
              组件内：<slot :row="变量" ></slot>  这一步在el-table-column源码内实现了

              使用时：
              <template v-slot="{ row }">
                {{ row.type==1?'文章':'视频' }}
              </template>
           -->
          <template v-slot="{ row }">
            {{ row.type==1?'文章':'视频' }}
          </template>
        </el-table-column>
        <el-table-column prop="user.nickname" label="作者"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 --- 分页器组件 -->
      <!-- 
          size-change: 表示页面展示数量更改时触发的事件
          current-change：当前页码发生改变时触发的事件

          current-page：表示当前页码
          page-sizes：表示页面展示数量的选项
          page-size：默认展示的数量
          layout：分页器的布局，比如：你不想展示总数量，就可以把total从layout中删除即可。
          total：表示数据的总量
       -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { articleList } from "@/api/article.js"
export default {
  data() {
    return {
      tableData: [],
      pageIndex: 1,   // 当前页码
      pageSize: 5,    // 默认展示的每页数据数量
      total: 0,       // 总数量
    };
  },
  created(){
    this.getArticle()
  },
  methods: {
    // 跳转到文章编辑(发布)页面
    editFn(id){
      this.$router.push({
        path: "/index/articleAdd",
        query: {
          id
        }
      })
    },
      getArticle(){
          articleList({
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
          }).then(res=>{
            // console.log(94,res);
            this.tableData = res.data.data;
            this.total = res.data.total
          })
      },
      // 点击数量选项请求最新数据
      handleSizeChange(pageSize){
        this.pageIndex = 1;
        this.pageSize = pageSize;
        this.getArticle()
      },
      // 点击页码请求最新页码数据
      handleCurrentChange(pageIndex){
        this.pageIndex = pageIndex;
        this.getArticle()
      }
  }
};
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}
</style>